import React, { useEffect, useState } from 'react';
import *as service from '../../../../api/Salaryaccounting'
import { Button, Table, Drawer, Form, Input, message, Tag, Select, Switch, Radio, Space } from 'antd'
import type { ColumnsType } from 'antd/es/table';
import './Payrollledger.scss'
interface Props {

}
function Payrollledger(props: Props) {
    interface DataType {
        id: number;
        name: string;
        cycle: string;
        taxperiod: string;
        usernumber: string;
        state: string;
        creationtime: string;
    }
    var [tableData, setTableData] = useState<DataType[]>([]) //定义表格组件状态--数据
    // 发送表格内容请求
    let corporateprotectionlist = async () => {
        let res = await service.Payrollledger_list()
        setTableData(res.data.data)
    }
    // 组件挂载期
    useEffect(() => {
        corporateprotectionlist()
    }, [])
    //数据源
    const columns: ColumnsType<DataType> = [
        {
            title: '序号', //表格列的标题
            render: (_, record) => <a>{tableData.indexOf(record) + 1}</a>,//动态渲染标签/组件
        },
        {
            title: '薪资方案', //表格列的标题
            key: 'name',
            render: (_, record) => <div>{record.name}</div>//动态渲染标签/组件
        },
        {
            title: '薪资周期', //表格列的标题
            key: 'cycle',
            render: (_, record) => <div>{record.cycle}</div>,//动态渲染标签/组件
        },
        {
            title: '税期', //表格列的标题
            key: 'taxperiod',
            render: (_, record) => <div>{record.taxperiod}</div>,//动态渲染标签/组件
        },
        {
            title: '人数', //表格列的标题
            key: 'usernumber',
            render: (_, record) => <div>{record.usernumber} </div>,//动态渲染标签/组件
        },
        {
            title: '状态', //表格列的标题
            key: 'state',
            render: (_, record) => <div>{record.state}</div>,//动态渲染标签/组件
        },
        {
            title: '生成时间', //表格列的标题
            key: 'creationtime',
            render: (_, record) => <div>{record.creationtime}</div>,//动态渲染标签/组件
        },
        {
            title: '操作', //表格列的标题
            render: (_, record) => <div>
                <button style={{ color: 'red', border: "none", backgroundColor: '#fff', cursor: 'pointer' }} onClick={() => { jobdelete(record) }}>删除</button>
            </div>,//动态渲染标签/组件
        },
    ]

 
    //删除
    let jobdelete = (record: any) => {
            let res = service.Payrollledger_delete({ id: record.id })
            corporateprotectionlist()
            message.success({ content: '删除成功' })
    }
    return (
        <div className='Payrollledger'>
            <h2>薪资台账</h2>
            <Table size={'small'} columns={columns} dataSource={tableData} style={{ marginTop: 20 }} rowKey={""} pagination={{ pageSize: 5 }} />
        </div >
    );
}


export default Payrollledger;